<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <input type="hidden" name="rid" value="${upCity.rid}">
    <table>
        <tr>
            <td>
                <div class="layui-form-item">
                    <label class="layui-form-label ">省:</label>
                    <div class="layui-input-block">
                        <select name="address" lay-search="" id="s1" lay-filter="sel_s1">

                        </select>
                    </div>
                </div>
            </td>
            <td>
                <div class="layui-form-item">
                    <label class="layui-form-label ">市:</label>
                    <div class="layui-input-block">
                        <select name="address" lay-search="" id="s2" lay-filter="sel_s2">

                        </select>
                    </div>
                </div>
            </td>
            <td>
                <div class="layui-form-item">
                    <label class="layui-form-label ">区县:</label>
                    <div class="layui-input-block">
                        <select name="cityId" lay-search="" id="s3">

                        </select>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div class="layui-form-item">
                    <label class="layui-form-label required">小区名:</label>
                    <div class="layui-input-block">
<%--                        <select name="address" lay-search="" id="s4" lay-filter="sel_s4">--%>

<%--                        </select>--%>
                        <input type="text" id="communityName" name="communityName" value="${upCity.communityName}" lay-verify="required" lay-reqtext="小区名不能为空" placeholder="请输入小区名" autocomplete="off" value="" class="layui-input">
                        <ul id="communityName_ul" class="layui-nav-tree" style="width: 100%;border: 1px solid whitesmoke;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;">

                        </ul>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label required">详细地址:</label>
                    <div class="layui-input-block">
                        <textarea name="communityAddress" id="communityAddress" lay-verify="required" lay-reqtext="小区地址不能为空" class="layui-textarea" placeholder="请输入详细地址"></textarea>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/layui/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'tableSelect'], function () {
        var form = layui.form,
            layer = layui.layer,
            tableSelect = layui.tableSelect,
            $ = layui.$;

        $("#communityAddress").val("${upCity.communityAddress}")

        //设置默认值
        $.ajax({
            url:"${pageContext.request.contextPath}/city/queryCityList",
            type:"post",
            data:{"rid":${upCity.city.rid},"showWi":1},
            dataType:"json",
            success:(rs)=>{
                var cityList=rs.cityList;
                var cityProList=rs.cityProList;
                var cityTopList=rs.cityTopList;

                $.each(cityTopList,function (i,j){

                    if(j.rid==${upCity.city.parentId}){
                        $("#s1").append("<option value='"+j.rid+"' selected>"+j.name+"</option>");
                    }else {
                        $("#s1").append("<option value='"+j.rid+"'>"+j.name+"</option>");
                    }
                })
                $.each(cityProList,function (i,j){

                    if(j.rid==${upCity.city.rid}){
                        $("#s2").append("<option value='"+j.rid+"' selected>"+j.name+"</option>");
                    }else {
                        $("#s2").append("<option value='"+j.rid+"'>"+j.name+"</option>");
                    }
                })
                $.each(cityList,function (i,j){

                    if(j.rid==${upCity.cityId}){
                        $("#s3").append("<option value='"+j.rid+"' selected>"+j.name+"</option>");
                    }else {
                        $("#s3").append("<option value='"+j.rid+"'>"+j.name+"</option>");
                    }
                })
                form.render('select');

            }
        })

        //省选择事件
        form.on('select(sel_s1)', function(data){
            // console.log(data.elem); //得到select原始DOM对象
            // console.log(data.value); //得到被选中的值
            // console.log(data.othis); //得到美化后的DOM对象
            $.ajax({
                url:"${pageContext.request.contextPath}/city/queryCityList",
                type:"post",
                data:{"rid":data.value,"showWi":2},
                dataType:"json",
                success:(rs)=>{
                    $("#s2").html(null);
                    $("#s3").html(null);
                    var cityList=rs.cityList;
                    var cityProList=rs.cityProList;

                    $.each(cityProList,function (i,j){
                        if(j.rid==${city.rid}){
                            $("#s2").append("<option value='"+j.rid+"' selected>"+j.name+"</option>");
                        }else {
                            $("#s2").append("<option value='"+j.rid+"'>"+j.name+"</option>");
                        }
                    })
                    $.each(cityList,function (i,j){
                        if(i==0){
                            $("#s3").append("<option value='"+j.rid+"' selected>"+j.name+"</option>");
                        }else {
                            $("#s3").append("<option value='"+j.rid+"'>"+j.name+"</option>");
                        }
                    })
                    form.render('select');

                }
            })
            form.render('select');
        });

        //市选择事件
        form.on('select(sel_s2)', function(data){
            // console.log(data.elem); //得到select原始DOM对象
            // console.log(data.value); //得到被选中的值
            // console.log(data.othis); //得到美化后的DOM对象
            $.ajax({
                url:"${pageContext.request.contextPath}/city/queryCityList",
                type:"post",
                data:{"rid":data.value,"showWi":3},
                dataType:"json",
                success:(rs)=>{
                    $("#s3").html(null);
                    var cityList=rs.cityList;

                    $.each(cityList,function (i,j){
                        if(i==0){
                            $("#s3").append("<option value='"+j.rid+"' selected>"+j.name+"</option>");
                        }else {
                            $("#s3").append("<option value='"+j.rid+"'>"+j.name+"</option>");
                        }
                    })
                    form.render('select');

                }
            })
            form.render('select');
        });

        //小区
        $("#communityName").on("input",function(e){
            //获取input输入的值
            // console.log(e.delegateTarget.value);
            var txt=e.delegateTarget.value;
            var obj=$("#s3").val();
            $.ajax({
                url:"${pageContext.request.contextPath}/city/queryCityList",
                type:"post",
                data:{"rid":obj,"showWi":4,"condition":txt},
                dataType:"json",
                success:(rs)=>{
                    $("#communityName_ul").html(null);
                    var comList=rs.comList;
                    $.each(comList,function (i,j){
                        $("#communityName_ul").append("<li class='layui-nav-item' >"+j.communityName+"</li>");
                    })
                    $("#communityName_ul>li").hover(function(){
                        $(this).addClass("layui-this")
                    },function(){
                        $(this).removeClass("layui-this")
                    })
                    $("#communityName_ul>li").click(function (data){
                        $("#communityName").val(this.innerHTML);
                        $("#communityName_ul").html(null);
                    })

                }
            })
            form.render('select');
        });


        //监听提交
        form.on('submit(saveBtn)', function (data) {

            $.ajax({
                url:"${pageContext.request.contextPath}/city/updateCommunity",
                type:"post",
                data:"data="+JSON.stringify(data.field),
                dataType:"text",
                success:(rs)=>{
                    if(rs=="OK"){
                        layer.msg("修改成功",{icon:1,time:500},function (){
                            parent.location.reload();
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        })
                    }else{
                        layer.msg("修改失败",{icon:2,time:500})
                    }
                }
            })
            return false;
        });
    });
</script>
</body>
</html>